import React, { Component } from 'react';
import { Card, Col, Row, Skeleton, Tabs, Radio, Empty } from 'antd';
// @ts-ignore
import BaseLine from '@/components/HehChart/Line';
// @ts-ignore
import BasePie from '@/components/HehChart/Pie';
import { useRequest } from '@umijs/hooks';
import { apiStatistics, apiStatisticsCard } from '@/services/otherServices';

class Index extends Component<any, any> {
  state = {
    indexDataLoading: false,
    topDataLoading: false,
    trendDataLoading: false,

    indexData: [],
    topData: [],
    trendData: {},

    tabActiveKey: 'curDay',
    lineTag: 'hour',
    pieTag: 'curDay',
  };

  componentDidMount() {
    this.getIndexData();
    this.getTopData();
    this.getTrendData();
  }

  componentWillUnmount() {}

  // ------ 获取接口数据 start-----
  getIndexData = () => {
    this.setState({ indexDataLoading: true });
    apiStatisticsCard(this.state.tabActiveKey).then((res: any) => {
      if (res === undefined || res === null) {
        this.setState({ indexDataLoading: false, indexData: [] });
        return;
      }
      this.setState({
        indexData: res,
        indexDataLoading: false,
      });
    });
  };

  getTopData = () => {
    this.setState({ topDataLoading: true });
    apiStatisticsCard(this.state.pieTag).then((res: any) => {
      if (res === undefined || res === null) {
        this.setState({ topDataLoading: false, topData: [] });
        return;
      }
      this.setState({
        topData: res,
        topDataLoading: false,
      });
    });
  };

  getTrendData = () => {
    this.setState({ trendDataLoading: true });
    apiStatistics(this.state.lineTag).then((res: any) => {
      if (res === undefined || res === null) {
        this.setState({ trendDataLoading: false, trendData: [] });
        return;
      }
      this.setState({
        trendData: res,
        trendDataLoading: false,
      });
    });
  };

  // ------ 获取接口数据 end-------

  render() {
    const {
      indexDataLoading,
      topDataLoading,
      trendDataLoading,
      indexData,
      topData,
      trendData,
      tabActiveKey,
    } = this.state;
    return (
      <>
        <div style={{ margin: 30 }}>
          <Row gutter={12}>
            <Col span={24}>
              <Card>
                <Tabs
                  onChange={item => {
                    this.setState(
                      {
                        tabActiveKey: item,
                      },
                      () => {
                        this.getIndexData();
                      },
                    );
                  }}
                  defaultActiveKey="curDay"
                >
                  <Tabs.TabPane tab="今日" key="curDay" />
                  <Tabs.TabPane tab="本周" key="curWeek" />
                  <Tabs.TabPane tab="本月" key="curMon" />
                </Tabs>
                <Skeleton loading={indexDataLoading}>
                  <Row gutter={24}>
                    {indexData &&
                      indexData.map((item: any, index: number) => (
                        <Col key={index} span={4}>
                          <Card style={{ marginBottom: 16 }}>
                            <Skeleton loading={indexDataLoading}>
                              <Col span={24}>
                                <h4
                                  style={{
                                    fontSize: 14,
                                    lineHeight: '22px',
                                    color: 'rgba(0,0,0,.45)',
                                  }}
                                >
                                  {item.label}
                                </h4>
                              </Col>
                              <Col span={24}>
                                <h1
                                  onClick={() => {
                                    // 路由地址
                                    if (item.gotoUrl) {
                                      this.props.history.push(item.gotoUrl);
                                    }
                                  }}
                                  style={{
                                    fontSize: 30,
                                    color: 'rgba(0,0,0,.85)',
                                    lineHeight: '38px',
                                  }}
                                >
                                  {!item.gotoUrl ? (
                                    item.total
                                  ) : (
                                    <a>{item.total}</a>
                                  )}
                                </h1>
                              </Col>
                            </Skeleton>
                          </Card>
                        </Col>
                      ))}
                    {indexData.length === 0 && (
                      <div style={{ textAlign: 'center', width: '100%' }}>
                        <Empty />
                      </div>
                    )}
                  </Row>
                </Skeleton>
              </Card>
            </Col>
          </Row>

          <Row gutter={12} style={{ marginTop: 30 }}>
            <Col span={18}>
              <Card
                title={'生产曲线图'}
                extra={
                  <Radio.Group
                    onChange={e => {
                      this.setState({ lineTag: e.target.value }, () => {
                        this.getTrendData();
                      });
                    }}
                    defaultValue="hour"
                  >
                    <Radio.Button value="hour">近一天</Radio.Button>
                    <Radio.Button value="day">近一周</Radio.Button>
                    <Radio.Button value="month">近一年</Radio.Button>
                  </Radio.Group>
                }
              >
                <Skeleton loading={trendDataLoading}>
                  <BaseLine
                    data={trendData}
                    fieldNames={{ label: 'x', value: 'y' }}
                    color={'line'}
                    cols={{
                      month: {
                        range: [0, 1],
                      },
                      temperature: {
                        max: 30,
                      },
                    }}
                  />
                </Skeleton>
              </Card>
            </Col>
            <Col span={6}>
              <Card
                title="产量占比"
                bodyStyle={{ padding: 8 }}
                extra={
                  <Radio.Group
                    onChange={e => {
                      this.setState({ pieTag: e.target.value }, () => {
                        this.getTopData();
                      });
                    }}
                    defaultValue="curDay"
                  >
                    <Radio.Button value="curDay">今日</Radio.Button>
                    <Radio.Button value="curWeek">本周</Radio.Button>
                    <Radio.Button value="curMon">本月</Radio.Button>
                  </Radio.Group>
                }
              >
                <Skeleton loading={topDataLoading}>
                  {topData && topData.length !== 0 ? (
                    <BasePie
                      data={topData || []}
                      fieldNames={{ label: 'label', value: 'total' }}
                    />
                  ) : (
                    <Empty />
                  )}
                </Skeleton>
              </Card>
            </Col>
          </Row>
        </div>
      </>
    );
  }
}

export default Index;
